<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="author" content="cleverqin">
        <meta name="description" content="Chat聊天室,使用nodejs和websocket构建的网页聊天室">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Chat聊天室</title>
        <link rel="stylesheet" href="styles/main.css">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div class='chat-box'>
            <div class='user-box'>
                <div class='tag'>在线用户：</div>
                <ul id='online-list'></ul>
            </div>
            <div class="wrapper">
                <div class="banner">
                    <div class='chat-title'>欢迎进入Chat聊天室</div>
                    <span id="status"></span>
                </div>
                <div id="historyMsg"></div>
                <div class="controls" >
                    <div class="items">
                        <input id="colorStyle" type="color" placeHolder='#000' title="font color" />
                        <input id="emoji" type="button" value="表情" title="emoji" />
                        <label for="sendImage" class="imageLable">
                            <input type="button" value="图片"  />
                            <input id="sendImage" type="file" value=""/>
                        </label>
                        <input id="clearBtn" type="button" value="清除聊天记录" title="clear screen" />
                    </div>
                    <textarea id="messageInput" placeHolder="请输入消息....."></textarea>
                    <input id="sendBtn" type="button" value="发送">
                    <div id="emojiWrapper">
                    </div>
                </div>
            </div>
        </div>
        <div id="loginWrapper">
            <p id="info">链接服务器...</p>
            <div id="nickWrapper" >
                <div class='login-form'>
                    <div class='form-group'>
                        <label>选择头像：</label>
                        <div class="select-pic-box form-control">
                            <ul class="img-list">
                                <li class="checked"><img src="content/headPic/1.jpg"></li>
                                <li><img src="content/headPic/2.jpg"></li>
                                <li><img src="content/headPic/3.jpg"></li>
                                <li><img src="content/headPic/4.jpg"></li>
                                <li><img src="content/headPic/5.jpg"></li>
                                <li><img src="content/headPic/6.jpg"></li>
                                <li><img src="content/headPic/7.jpg"></li>
                                <li><img src="content/headPic/8.jpg"></li>
                                <li><img src="content/headPic/9.jpg"></li>
                                <li><img src="content/headPic/10.jpg"></li>
                            </ul>
                        </div>
                    </div>
                    <div class='form-group'>
                        <label>填写昵称：</label>
                        <div class='form-control'><input type="text" placeHolder="请输入你的昵称" id="nicknameInput" /></div>
                    </div>
                    <div class="form-group btn-box"><input type="button" value="确定" id="loginBtn" /></div>
                </div>
            </div>
        </div>
        <script src="scripts/jquery-1.11.1.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script src="scripts/canvas.js"></script>
        <script src="scripts/client.js"></script>
    </body>
</html>
